import { BaseThemeVarService } from '../service/base'
import { ThemeElement, ThemeProperty, ThemeState } from '../types'

export interface NavbarThemeVarBaseConfig {
  background: string
  colorHover: string
  colorActive: string
}

export interface NavbarThemeVarDropdownConfig {
  background: string
  backgroundHover: string
}

export interface NavbarThemeVarConfig {
  default: NavbarThemeVarBaseConfig
  dropdown: NavbarThemeVarDropdownConfig
}

export class NavbarThemeVarService extends BaseThemeVarService {
  private static instance: NavbarThemeVarService

  static getInstance(): NavbarThemeVarService {
    if (!NavbarThemeVarService.instance) {
      NavbarThemeVarService.instance = new NavbarThemeVarService()
    }
    return NavbarThemeVarService.instance
  }

  get default(): NavbarThemeVarConfig {
    return {
      default: {
        background: this.varMapper.getVarName({
          element: ThemeElement.Navbar,
          property: ThemeProperty.Bg,
        }),
        colorHover: this.varMapper.getVarName({
          element: ThemeElement.Navbar,
          state: ThemeState.Hover,
          property: ThemeProperty.Text,
        }),
        colorActive: this.varMapper.getVarName({
          element: ThemeElement.Navbar,
          state: ThemeState.Active,
          property: ThemeProperty.Text,
        }),
      },
      dropdown: {
        background: this.varMapper.getVarName({
          element: ThemeElement.Navbar,
          subElement: 'dropdown',
          property: ThemeProperty.Bg,
        }),
        backgroundHover: this.varMapper.getVarName({
          element: ThemeElement.Navbar,
          subElement: 'dropdown',
          state: ThemeState.Hover,
          property: ThemeProperty.Bg,
        }),
      },
    }
  }
}
